<template>
  <div class="city-selector" @click="showCascadePicker">
    <ul v-if="!loading">
      <li>
        <slot></slot>
      </li>
    </ul>
    <loading :show="loading" />
  </div>
</template>

<script>
import api from '@/api'
import Loading from '@/components/Loading'
import { mapGetters } from 'vuex'

export default {
  name: 'CitySelector',
  props: {
    // 编辑时用
    editSelected: {
      type: Array,
      default() {
        return []
      }
    }
  },
  components: {
    Loading
  },
  computed: {
    ...mapGetters({
      tree: 'AddressTree/tree'
    })
  },
  data() {
    return {
      addressInfo: null,
      loading: false
    }
  },
  methods: {
    // CascadePicker
    showCascadePicker() {
      if (this.loading === false) {
        this.cascadePicker.show()
      }
    },
    selectHandle(selectedVal, selectedIndex, selectedText) {
      this.$emit('citySelected', { selectedVal, selectedIndex, selectedText })
    },
    cancelHandle () {},
    // 处理编辑地址选中的索引
    selectedIndex () {
      // console.log(this.editSelected)
      const [provinceId, cityId, areaId] = this.editSelected
      if (this.editSelected.length > 0) {
        let province = {}
        this.tree.forEach((item, index) => {
          if (+item.value === +provinceId) {
            province = { item, index }
          }
        })
        let city = {}
        province.item.children.forEach((item, index) => {
          if (+item.value === +cityId) {
            city = { item, index }
          }
        })
        let area = {}
        city.item.children.forEach((item, index) => {
          if (item.value === +areaId) {
            area = { item, index }
          }
        })
        // console.log(province.index, city.index, area.index)
        return [province.index, city.index, area.index]
      }
      return [0, 1, 1]
    }
  },
  created () {
    if (!this.tree) {
      this.loading = true
      api.Address.tree().then(response => {
        const { data } = response
        this.$store.dispatch('AddressTree/set_data', data.tree).then(() => {
          this.loading = false
        })
      }).finally(() => {
        // this.loading = false
      })
    }
  },
  mounted () {
    if (Array.isArray(this.tree) && this.tree.length > 0) {
      this.$nextTick(() => {
        this.cascadePicker = this.$createCascadePicker({
          title: '选择地址',
          // data: this.addressList,
          // 这里赋值一定要这样写,不知道为什么,可能localStorage要时间吧
          data: this.tree,
          // 选中处理.
          selectedIndex: this.selectedIndex(),
          onSelect: this.selectHandle,
          onCancel: this.cancelHandle
        })
      })
    } else {
      this.loading = true
      api.Address.tree().then(response => {
        const { data } = response
        this.$store.dispatch('AddressTree/set_data', data.tree).then(() => {
          this.loading = false
          this.cascadePicker = this.$createCascadePicker({
            title: '选择地址',
            // data: this.tree,
            data: data.tree,
            // 选中处理.
            selectedIndex: this.selectedIndex(),
            onSelect: this.selectHandle,
            onCancel: this.cancelHandle
          })
        })
      }).finally(() => {
        // this.loading = false
      })
    }
  }
}
</script>

<style scoped lang="stylus">
.city-selector
  ul
    //width 100%
    height 40px
    line-height 80px
    border-radius 4px
    li
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      border: 0.5px solid #eaeaea;
      border-radius: 4px;
      width: 200%;
      height: 200%;
      -webkit-transform: scale(0.5);
      transform: scale(0.5);
      -webkit-transform-origin: left top;
      transform-origin: left top;
      font-size 24px
      padding-left 15px
      box-sizing border-box
  background white
  border-radius 2px
  position relative
//border unset
</style>
